import React, { Component } from 'react'
import { Chart } from '@/components/Chart';

import echarts from 'echarts';
import Label from '@/components/Label';

import { connect } from 'dva';
import { last7Day } from '@/utils/util';

interface P {
  dispatch?: any;
  data?: {
    dangerDay: Array<String>;
    dangerQuantity: Array<Number>;
    dangerTotal: Number;
    dangerError: Number;
  }
}

@connect(({ home }) => ({
  data: home.danger || {}
}))
class Danger extends Component<P> {

  state = {
    danger: 0,
    done: 0
  }

  renderChart = (label, data) => {
    Chart({
      ref: this.refs.line,
      label,
      yAxis: {
        name: '数量',
        splitLine: {
          show: false
        }
      },
      xAxis: {
        name: '时间',
        splitLine: {
          show: false
        },
      },
      boundaryGap: true,
      data: [{
        name: '隐患',
        type: "bar",
        data,
        color: '#0880DF',
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top',
              color: '#0880DF'
            },
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#40AAFF' },
                { offset: 0.8, color: '#0880DF' },
                { offset: 1, color: '#0880DF' }
              ]
            )
          },

        },
      }]
    })
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'home/queryDanger' }).then(() => {
      const { data } = this.props;
      const { dangerDay, dangerQuantity } = data;

      this.renderChart(
        !Array.isArray(dangerDay) || dangerDay.length < 7 ? last7Day() : dangerDay.map(v => v.slice(5)), 
        !Array.isArray(dangerQuantity) ? [] : dangerQuantity.fill(0, dangerQuantity.length, 7)
      )
    })

  }

  render() {

    const { data } = this.props;
    const { dangerTotal, dangerError } = data;

    return (
      <section style={{ height: '100%', width: '100%', padding: '3%', position: 'relative' }}>
        <Label color='#0880DF' value={`上报隐患数${dangerTotal || 0}起，已整改${dangerError || 0}起`}/>
        <div ref='line' style={{ width: '100%', height: '100%' }}></div>
      </section>
    )
  }
}

export default Danger;